<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZTBhNTBiMy0xODg4LTQyZDgtODFlMC0zM2NkZmNkZWUyOTEiLCJpZCI6MjYyMjIxLCJpYXQiOjE3NTg0NDY1MDZ9.2s5NIb9GsHgLgxoU3zgVTKPHe25W3Y0r04Zd3vCMHCo'

onMounted(async () => {
  // 创建 Cesium Viewer 实例并配置相关参数
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 使用 Cesium Ion 资源加载日本区域的地形数据
    // terrainProvider: Cesium.Terrain.fromWorldTerrain(),
    // terrainProvider: new Cesium.EllipsoidTerrainProvider(),
    terrain: Cesium.Terrain.fromWorldTerrain(),
    // selectionIndicator: false,

    // 隐藏导航帮助按钮
    navigationHelpButton: false,
    // 隐藏 Home 按钮
    homeButton: false,
    // 隐藏场景模式选择器
    sceneModePicker: false,
    // 隐藏动画控件
    animation: false,
    // 隐藏时间轴控件
    timeline: false,
    // 隐藏搜索控件
    geocoder: false,
    // 隐藏底图选择器
    // baseLayerPicker: false,
    // 隐藏全屏按钮
    fullscreenButton: false,
    // 隐藏 VR 按钮
    vrButton: false,
    // 去掉版权信息
    creditContainer: document.createElement('div')
  });

  // 将相机飞到旧金山，根据给定的经度、纬度和高度。
  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
    orientation: {
      heading: CesiumMath.toRadians(0.0),
      pitch: CesiumMath.toRadians(-15.0),
    }
  });

  // Add Cesium OSM Buildings, a global 3D buildings layer.
  const buildingTileset = await createOsmBuildingsAsync();
  viewer.scene.primitives.add(buildingTileset);
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>